import React, { useEffect } from 'react'
import Header from '../../../components/Header'
import PeoImg from '../../../assets/image/头像 女孩 (3).png'
import userImg from '../../../assets/image/头像 男孩.png'
import './index.css'
import Search, { SearchProps } from 'antd/es/input/Search'


export default function Take() {
    let res = {
        peopleName: '品如',
        peopleMess: [
            {
                message: 'hhahhahah'
            },
            {
                message: '2222'
            },

        ],
    }
    const renderTake = () => {
        const onSearch: SearchProps['onSearch'] = (value, _e, info) => (
            res.peopleMess.push({ message: value })
        )

        return (
            <>
                <div>
                    <div className='Take_tittle'>{res.peopleName}</div>
                    <div className='Take_left'>
                        {
                            res.peopleMess.map((item, index) => {
                                return (
                                    <div className='Take_left_hang' key={index}>
                                        <img src={PeoImg} alt="" className='take_img' />
                                        <div className='take_message'>{item.message}</div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className='Take_right'>
                        {
                            res.peopleMess.map((item, index) => {
                                return (
                                    <div className='Take_right_hang' key={index}>
                                        <div className='take_message'>{item.message}</div>
                                        <img src={userImg} alt="" className='take_img' />
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className='take_send'>
                        <Search
                            placeholder=""
                            enterButton="发送"
                            size="large"
                            onSearch={onSearch}
                        />
                    </div>
                </div>
            </>
        )
    }
    return (
        <>
            <Header />
            {renderTake()}
        </>
    )
}
